<template>
  <div class="pass-wapper">
    <h3>{{title}}</h3>
    <div class="tip-wapper">
      <span>{{$t('channelsettings.Voicelibrary1')}}:</span><br/>
      <p>{{$t('configLazyLoad.qualityCheck.passText1')}}</p>
      <p>{{$t('configLazyLoad.qualityCheck.passText2')}}</p>
      <p>{{$t('configLazyLoad.qualityCheck.passText3')}}</p>
    </div>
    <el-form label-position="top" label-width="80px" :model="form">
      <el-row :gutter="20">
        <el-col :span="14">
          <el-form-item :label="$t('configLazyLoad.qualityCheck.qualityTempName')">
            <el-input :disabled="!isWhite" :maxlength="20" v-model.trim="form.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item :label="$t('configLazyLoad.qualityCheck.proportionOfNotKeyError')">
            <el-input class="percent" :maxlength="2" :disabled="!isWhite" v-model.trim="form.uncurxratio"><template slot="append">%</template></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <affix :label="$t('qualityCheck.quality')">
        <level-option-box ref="levelOption" :isWhite="isWhite" :size="580" :initData="initLevelData"></level-option-box>
      </affix>
      <el-col v-show="isWhite" :span="24" class="button-group">
        <el-button type="primary" class="primary_btn" @click.stop="submitForm">{{$t('public.save')}}</el-button>
        <el-button class="primary_btn mar-left" @click.stop="resetForm">{{$t('public.cancel')}}</el-button>
      </el-col>
    </el-form>
  </div>
</template>

<script>
  import LevelOptionBox from '@/components/public-modules/config/level-option-box'
  import Affix from '@/components/ui-modules/affix/Affix'
  let initForm = {
    _id: '',
    name: '',
    type: 'pass',
    enable: '',
    uncurxratio: '50',
    config: []
  }
  export default {
    name: 'PassTemplate',
    data () {
      return {
        initLevelData: [],
        form: JSON.parse(JSON.stringify(initForm))
      }
    },
    props: {
      isWhite: Boolean,
      title: {
        type: String,
        default: function () {
          return this.$t('configLazyLoad.qualityCheck.addPassTemplate')
        }
      },
      initData: {
        type: Object,
        default: function () {
          return JSON.parse(JSON.stringify(initForm))
        }
      }
    },
    watch: {
      initData (cur, old) {
        this.form = cur
        this.initLevelData = JSON.parse(JSON.stringify(cur.config))
      }
    },
    methods: {
      resetForm () {
        this.form = JSON.parse(JSON.stringify(initForm))
        this.initLevelData = JSON.parse(JSON.stringify(this.form.config))
      },
      validateForm () {
        if (!this.form.name) {
          this.$message.error(this.$t('configLazyLoad.qualityCheck.templateNameCannotBeEmpty'))
          return null
        }
        if (isNaN(this.form.uncurxratio) || this.form.uncurxratio <= 0) {
          this.$message.error(this.$t('configLazyLoad.qualityCheck.proportionOfNotKeyRange'))
          return null
        }
        return true
      },
      validateLevel (level) {
        let msg = ''
        if (level.length === 0) {
          return this.$t('configLazyLoad.qualityCheck.qualityItemIsRequired')
        }
        level.forEach(item => {
          let nonFatal = 0
          let count = 0
          if (item.child.length > 0) {
            item.child.forEach(child => {
              if ((+child.Non_Fatal < 0 || +child.Non_Fatal > 20) && !msg) {
                msg = item.value + this.$t('configLazyLoad.qualityCheck.numberOfNotKeyRange')
              }
              nonFatal = parseInt(child.Non_Fatal)
              if (child.fatalValue) {
                count++
              }
            })
            if (count < nonFatal && !msg) {
              msg = item.value + this.$t('configLazyLoad.qualityCheck.numberOfNotKeyError')
            }
          }
        })
        return msg
      },
      submitForm () {
        let level = JSON.parse(JSON.stringify(this.$refs.levelOption.treeData.child))
        let form = {}
        let msg = ''
        if (!this.validateForm()) return null
        msg = this.validateLevel(level)
        if (msg) {
          this.$message.error(msg)
          return null
        }
        form = JSON.parse(JSON.stringify(this.form))
        form.config = level
        this.$emit('save', form)
        this.resetForm()
      }
    },
    components: {
      Affix,
      LevelOptionBox
    },
    beforeMount () {
      this.form = JSON.parse(JSON.stringify(this.initData))
      this.initLevelData = JSON.parse(JSON.stringify(this.initData.config))
    }
  }
</script>

<style lang="stylus">
.pass-wapper
  .ui-affix
    padding 18px 0 27px 0
    margin-top 10px
</style>
<style lang="stylus" scoped>
@import '../base'
@import "../../../../../assets/common"
.tip-wapper
  color $c-prompt
  margin 16px 0
.pass-wapper
  position relation
.button-group
  position absolute
  bottom -12px
  right 0
</style>
